<template>
  <div class="search-result">
    <el-table :data="searchResult" border>
      <el-table-column align="center" label="column1" width="">
        <template slot-scope="scope">{{scope.row}}</template>
      </el-table-column>
      <el-table-column align="center" label="column2" width="">
        <template slot-scope="scope">{{scope.row}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)" >编辑</el-button>
          <el-button type="text" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination class="result-pagination" @size-change="pageSizeChange" @current-change="pageNumChange" :total="totalSize" :current-page.sync="resultPageNum" :page-size="resultPageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <save-dialog :dialogShow.sync="dialogShow" type="edit" :id="selectedId" @success="successHandler"></save-dialog>
  </div>
</template>

<script>
import saveDialog from '../saveDialog'

export default {
  name: 'searchResult',
  props: {
    searchResult: {
      type: Array,
      default() {
        return []
      }
    },
    //#region 分页组件
    totalSize: Number,
    pageNum: Number,
    pageSize: Number,
    //#endregion
  },
  data() {
    return {
      //#region 分页组件
      resultPageNum: 1,
      resultPageSize: 10,
      //#endregion 分页组件,

      selectedId: "0",
      dialogShow: false,
    }
  },
  watch: {
    pageSize() {
      //分页组件, 每页显示数量bug
      this.resultPageSize = this.pageSize;
    }
  },
  methods: {
    //#region 页码组件
    pageSizeChange(pageSize) {
      this.$emit('update:pageSize', pageSize);
      this.$emit('search');
    },
    pageNumChange(pageNum) {
      this.$emit('update:pageNum', pageNum);
      this.$emit('search');
    },
    //#endregion

    edit(row) {
      this.dialogShow = true;
    },
    async remove(row) {
      try {
        await this.$confirm('您确认删除这条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.$message.success('删除成功');
        this.$emit('search');
      } catch (ex) {

      }
    },
    successHandler() {
      this.$emit('search');
    }
  },
  mounted(){
    console.log(this);
  },
  components: {
    saveDialog
  }
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
